<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="用户id:" prop="uid">
                    <el-input-number v-model="form.uid" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="微信用户 id:" prop="wechat_user_id">
                    <el-input-number v-model="form.wechat_user_id" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户账号:" prop="account">
                    <el-input v-model="form.account" placeholder="请输入用户账号" clearable />
                </el-form-item>
                <el-form-item label="用户密码:" prop="pwd">
                    <el-input v-model="form.pwd" placeholder="请输入用户密码" clearable />
                </el-form-item>
                <el-form-item label="真实姓名:" prop="real_name">
                    <el-input v-model="form.real_name" placeholder="请输入真实姓名" clearable />
                </el-form-item>
                <el-form-item label="性别:" prop="sex">
                    <el-input-number v-model="form.sex" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="生日:" prop="birthday">
                    <el-date-picker v-model="form.birthday" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择生日" />
                </el-form-item>

                <el-form-item label="身份证号码:" prop="card_id">
                    <el-input v-model="form.card_id" placeholder="请输入身份证号码" clearable />
                </el-form-item>
                <el-form-item label="用户备注:" prop="mark">
                    <el-input v-model="form.mark" placeholder="请输入用户备注" clearable />
                </el-form-item>
                <el-form-item label="用户标签 id:" prop="label_id">
                    <el-input v-model="form.label_id" placeholder="请输入用户标签 id" clearable />
                </el-form-item>
                <el-form-item label="用户分组id:" prop="group_id">
                    <el-input-number v-model="form.group_id" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户昵称:" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入用户昵称" clearable />
                </el-form-item>
                <el-form-item label="用户头像:" prop="avatar">
                    <el-input v-model="form.avatar" placeholder="请输入用户头像" clearable />
                </el-form-item>
                <el-form-item label="手机号码:" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号码" clearable />
                </el-form-item>
                <el-form-item label="地址:" prop="addres">
                    <el-input v-model="form.addres" placeholder="请输入地址" clearable />
                </el-form-item>
                <el-form-item label="注销时间:" prop="cancel_time">
                    <el-date-picker v-model="form.cancel_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择注销时间" />
                </el-form-item>

                <el-form-item label="登录时间:" prop="last_time">
                    <el-date-picker v-model="form.last_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择登录时间" />
                </el-form-item>

                <el-form-item label="登录ip:" prop="last_ip">
                    <el-input v-model="form.last_ip" placeholder="请输入登录ip" clearable />
                </el-form-item>
                <el-form-item label="用户余额:" prop="now_money">
                    <el-input-number v-model="form.now_money" :step="0.01" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="佣金金额:" prop="brokerage_price">
                    <el-input-number v-model="form.brokerage_price" :step="0.01" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="推广员id:" prop="spread_uid">
                    <el-input-number v-model="form.spread_uid" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="推广员关联时间:" prop="spread_time">
                    <el-date-picker v-model="form.spread_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择推广员关联时间" />
                </el-form-item>

                <el-form-item label="推广员到期时间:" prop="spread_limit">
                    <el-date-picker v-model="form.spread_limit" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择推广员到期时间" />
                </el-form-item>

                <el-form-item label="推广员等级:" prop="brokerage_level">
                    <el-input-number v-model="form.brokerage_level" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户类型:" prop="user_type">
                    <el-input v-model="form.user_type" placeholder="请输入用户类型" clearable />
                </el-form-item>
                <el-form-item label="成功推广时间:" prop="promoter_time">
                    <el-date-picker v-model="form.promoter_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择成功推广时间" />
                </el-form-item>

                <el-form-item label="是否为推广员:" prop="is_promoter">
                    <el-input-number v-model="form.is_promoter" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="主账号:" prop="main_uid">
                    <el-input-number v-model="form.main_uid" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户购买次数:" prop="pay_count">
                    <el-input-number v-model="form.pay_count" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户消费金额:" prop="pay_price">
                    <el-input-number v-model="form.pay_price" :step="0.01" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="下级人数:" prop="spread_count">
                    <el-input-number v-model="form.spread_count" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="下级订单数:" prop="spread_pay_count">
                    <el-input-number v-model="form.spread_pay_count" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="下级订单金额:" prop="spread_pay_price">
                    <el-input-number v-model="form.spread_pay_price" :step="0.01" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="积分:" prop="integral">
                    <el-input-number v-model="form.integral" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="免费会员等级:" prop="member_level">
                    <el-input-number v-model="form.member_level" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="免费会员成长值:" prop="member_value">
                    <el-input-number v-model="form.member_value" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户获赞数:" prop="count_start">
                    <el-input-number v-model="form.count_start" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="用户粉丝数:" prop="count_fans">
                    <el-input-number v-model="form.count_fans" :step="1" :min="0"></el-input-number>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                uid: [{ required: true, message: "请输入用户id", trigger: "blur" }],
                wechat_user_id: [{ required: true, message: "请输入微信用户 id", trigger: "blur" }],
                account: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
                pwd: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
                real_name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
                sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
                card_id: [{ required: true, message: "请输入身份证号码", trigger: "blur" }],
                mark: [{ required: true, message: "请输入用户备注", trigger: "blur" }],
                group_id: [{ required: true, message: "请输入用户分组id", trigger: "blur" }],
                nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
                avatar: [{ required: true, message: "请输入用户头像", trigger: "blur" }],
                last_ip: [{ required: true, message: "请输入登录ip", trigger: "blur" }],
                now_money: [{ required: true, message: "请输入用户余额", trigger: "blur" }],
                brokerage_price: [{ required: true, message: "请输入佣金金额", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态", trigger: "blur" }],
                spread_uid: [{ required: true, message: "请输入推广员id", trigger: "blur" }],
                user_type: [{ required: true, message: "请输入用户类型", trigger: "blur" }],
                is_promoter: [{ required: true, message: "请输入是否为推广员", trigger: "blur" }],
                pay_count: [{ required: true, message: "请输入用户购买次数", trigger: "blur" }],
                pay_price: [{ required: true, message: "请输入用户消费金额", trigger: "blur" }],
                spread_count: [{ required: true, message: "请输入下级人数", trigger: "blur" }],

            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            status:[
               { label: "禁止", value: 0 },
               { label: "正常", value: 1 },
            ],

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
